<template>
  <!-- 表格 -->
  <a-table
    :columns="columns"
    :data-source="props.projects"
    :bordered="true"
    :loading="props.loading"
    :pagination="false"
    :scroll="{ y: 'calc(100vh - 200px)' }"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'projectName'">
        <a @click="viewDetail(record)">{{ text }}</a>
      </template>
      <template v-else-if="column.dataIndex === 'endTime'">
        <span>{{ text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '未设置' }}</span>
      </template>
      <!-- <template v-else-if="column.dataIndex === 'courseList'">
        <div style="display: flex;flex-wrap: wrap;justify-content:space-around;">
          <a v-for="course in record.courseList">{{ course.courseName }}</a>
        </div>
      </template> -->
      <template v-else-if="column.dataIndex === 'projectType'">
        <span v-if="text === 1">
          <a-tag color="success">普通项目</a-tag>
        </span>
        <span v-if="text === 2">
          <a-tag color="processing">课程项目</a-tag>
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'projectStatus'">
        <span v-if="text === 0"><a-tag color="error">已删除</a-tag></span>
        <span v-else-if="text === 1"><a-tag color="default">未启动</a-tag></span>
        <span v-else-if="text === 2"><a-tag color="processing">进行中</a-tag></span>
        <span v-else-if="text === 3"><a-tag color="warning">已暂停</a-tag></span>
        <span v-else-if="text === 4"><a-tag color="success">已结束</a-tag></span>
      </template>
      <template v-else-if="column.dataIndex === 'operate'">
        <a-button>编辑</a-button>
        <a-divider type="vertical" />
        <a-button v-if="record.projectStatus === 1">启动</a-button>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import router from '@/router';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
const store = useStore();

const props = defineProps({
  projects: {
    type: Array,
    default: null
  },
  loading: {
    type: Boolean,
    default: true
  }
});

//初始化表格数据类型
const columns = ref(null);
columns.value = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center'
  },
  {
    title: '项目状态',
    dataIndex: 'projectStatus',
    align: 'center'
  },
  {
    title: '项目类型',
    dataIndex: 'projectType',
    align: 'center'
  },
  {
    title: '项目期限',
    dataIndex: 'endTime',
    align: 'center'
  }
];

//点击项目后进入项目页面
function viewDetail(record) {
  //存入store
  store.commit('project/SET_PROJECTID', record.projectId);
  store.commit('project/SET_PROJECTNAME', record.projectName);
  store.commit('project/SET_CREATORID', record.creatorId);
  store.commit('project/SET_PROJECTTYPE', record.projectType);
  router.push({ name: '项目详情', params: { projectId: record.projectId } });
}
</script>

<style scoped>
.ant-table-wrapper {
  position: relative;
  height: 100%;
}
</style>
